<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>综合案例</title>
    <style>
      .kuanjia {
        width: 200px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <h3>青春不常在，抓紧谈恋爱</h3>
    <table width="500">
      <tr>
        <td>性别</td>
        <td>
          <!-- 这里的label标签是为了点击"男"或者点击"女"这两个字的时候，也能选上● -->
          <input type="radio" name="name" id="nan" /><label for="nan"
            ><img src="man.jpg" />男</label
          >
          <input type="radio" name="name" id="nv" /><label for="nv"
            ><img src="women.jpg" />女</label
          >
        </td>
      </tr>
      <tr>
        <td>生日</td>
        <td>
          <select>
            <option>--请选择年--</option>
            <option>2002</option>
            <option>2001</option>
            <option>2000</option>
            <option>1999</option>
            <option>1998</option>
            <option>1997</option>
            <option>1996</option>
          </select>
          <select>
            <option>--请选择月--</option>
            <option>12月</option>
            <option>11月</option>
            <option>10月</option>
            <option>9月</option>
            <option>8月</option>
            <option>7月</option>
            <option>6月</option>
            <option>5月</option>
            <option>4月</option>
            <option>3月</option>
            <option>2月</option>
            <option>1月</option>
          </select>
          <select>
            <option>--请选择日--</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>所在地区</td>
        <td>
          <input type="text" value="四川成都" />
        </td>
      </tr>
      <tr>
        <td>婚姻状况</td>
        <td>
          <input type="radio" name="name" />未婚
          <input type="radio" name="name" />已婚
          <input type="radio" name="name" />离婚
        </td>
      </tr>
      <tr>
        <td>学历</td>
        <td><input type="text" value="本科在读" /></td>
      </tr>
      <tr>
        <td>喜欢的类型</td>
        <td>
          <input type="checkbox" />妩媚的 <input type="checkbox" />可爱的
          <input type="checkbox" />小鲜肉 <input type="checkbox" />老腊肉
          <input type="checkbox" />都喜欢
        </td>
      </tr>
      <tr>
        <td>自我介绍</td>
        <td><textarea class="kuanjia">苟露，学号是23215220135！</textarea></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="免费注册" /></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input
            type="checkbox"
            checked="checked"
          />我同意注册条款和会员加入标准
        </td>
      </tr>
      <tr>
        <td></td>
        <td><a href="#">我是会员，立即登录</a></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <h4>我承诺</h4>
          <ul>
            <li>年满18岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
          </ul>
        </td>
      </tr>
    </table>
  </body>
</html>

<!-- 
标签解释：
input、select、textarea三种标签

input标签中的type值为radio是创建单选框 ，小圆圈黑点，name属性是只能选择一个单选框
input标签中的type值为checkbox是复选框，方块打钩,属性checked="checked"是默认打钩状态
input标签中的type值为text是文本框，属性value是页面显示的默认文本
input标签中的type值为submit是提交按钮，属性value也是默认显示的文字

select标签是下拉选择内容，里面必须包括option属性,而第一个option属性就是默认显示的下拉内容

textarea标签是文本标签，写的字很多
-->
